<template>
  <view
    class="nav_bar"
    :style="{
      height: headerHeight + SystemInfo.statusBarHeight + 'px',
      background: '#fff',
    }"
  >
    <view
      class="warp"
      :style="{
        marginTop: SystemInfo.statusBarHeight + 'px',
        height: headerHeight + 'px',
      }"
    >
      <view class="center">
        {{ center }}
      </view>
      <view
        class="header_warp"
        :style="{
          width: maxWidth + 'px',
        }"
      >
        <view class="left" @click="back">
          <view class="iconfont icon-angle-left"></view>
          {{ left }}
        </view>

        <view class="right">
          <slot></slot>
        </view>
      </view>
    </view>
    <view
      class="height_line"
      :style="{
        width: '100%',
        height: headerHeight + 'px',
      }"
    >
    </view>
  </view>
</template>

<script>
export default {
  name: "nav-bar",
  props: {
    left: String,
    center: {
      type: String,
      default: "课程详情",
    },
  },
  data() {
    return {
      isWx: false,
    };
  },
  methods: {
    back() {
      this.$u.route({
        type: "back",
      });
    },
  },
  onLoad() {},
  computed: {
    headerHeight() {
      return this.$store.getters.headerHeight;
    },

    maxWidth: function () {
      return this.$store.getters.maxWidth;
    },
    SystemInfo: function () {
      return this.$store.state.equipment.SystemInfo;
    },
  },
};
</script>

<style lang="scss">
.nav_bar {
  position: relative;
  width: 100%;
  height: 100%;

  .warp {
    background: #f5f7fa;
    width: 100%;
    height: 100%;
    color: #333;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;

    .center {
      font-size: 36upx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .header_warp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: 0 30upx;
      position: relative;

      .iconfont {
        font-size: 40upx;
      }

      .left {
        position: absolute;
        left: 15upx;
      }

      .right {
        position: absolute;
        right: 15upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 40upx;
      }
    }
  }
}
</style>
